<script setup lang="ts">
import type { Position } from 'notivue'

const { state, actions } = useStore()
const config = useNotivue()

const positions = [
   { value: 'top-left', label: 'Top Left', rotate: 0 },
   { value: 'top-center', label: 'Top Center', rotate: 45 },
   { value: 'top-right', label: 'Top Right', rotate: 90 },
   { value: 'bottom-left', label: 'Bottom Left', rotate: -90 },
   { value: 'bottom-center', label: 'Bottom Center', rotate: -135 },
   { value: 'bottom-right', label: 'Bottom Right', rotate: -180 },
]

const isFullWidth = computed(() => state.maxWidth === '100%')

function setPosition(position: Position) {
   config.update({ position })
}

const btnProps = {
   class: 'ButtonBase SwitchButton Switch',
   role: 'switch',
}
</script>

<template>
   <div role="radiogroup" aria-label="Position">
      <div
         class="ButtonBase SwitchButton SquaredSwitch"
         v-for="position in positions"
         :key="position.value"
         role="radio"
         @click="setPosition(position.value as Position)"
         tabindex="0"
         :aria-label="position.label"
         :aria-checked="config.position.value === position.value"
      >
         <IconsArrowIcon :rotate="position.rotate" />
      </div>

      <button v-bind="btnProps" :aria-checked="isFullWidth" @click="actions.setFullWidth">
         Full Width
      </button>
      <button
         v-bind="btnProps"
         :aria-checked="state.centerOnMobile"
         @click="actions.toggleCenterOnMobile"
         :disabled="config.position.value.endsWith('center')"
      >
         Center on Mobile
      </button>
   </div>
</template>

<style scoped>
div[role='radiogroup'] {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   height: max-content;
   gap: 10px;
}

div[role='radio'] {
   aspect-ratio: 1;
   padding: 0px;
   width: 2rem;
}

.Switch {
   font-weight: 700;
   font-size: 0.925rem;
   justify-items: center;
   display: grid;
   grid-column: 1 / span 3;
   aspect-ratio: unset !important;
   height: max-content;
}

svg {
   width: 1em;
}
</style>
